import React from 'react';
import styles from './style';
import {
  Text,
  SafeAreaView,
  ImageBackground,
  Image,
  View,
  TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../common/component/back';
const avatar = require('../../common/img/head.jpg');
const dz = require('../../common/img/dz.png');
const share = require('../../common/img/share.png');
const downLoad = require('../../common/img/download.png');
const sc = require('../../common/img/sc.png');
export default class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
    };
  }
  render() {
    let {navigation, route} = this.props;
    let bg = route.params.img;
    let status = route.params.status;
    return (
      <ImageBackground source={bg} style={styles.bgImg}>
        <SafeAreaView style={styles.content}>
          <Back navigation={navigation} witheIcon />
          <Animatable.View style={styles.contentText} animation="slideInUp">
            <TouchableOpacity
              activeOpacity={1}
              style={styles.topcontent}
              onPress={() => {
                console.log('11');
              }}>
              <Text style={styles.rowBtn}></Text>
            </TouchableOpacity>
            <View style={styles.bottomContent}>
              <View style={styles.titleStyle}>
                <View style={styles.titleStyleLeftContainer}>
                  <Image source={avatar} style={styles.avatar} />
                  <Text style={styles.leftStyle}>倾听他的事</Text>
                </View>
                {status ? null : (
                  <TouchableOpacity
                    activeOpacity={0.6}
                    onPress={() => {
                      navigation.navigate('SelfWork');
                    }}>
                    <View style={styles.rightStyle}>
                      <Text style={styles.rightTextStyle}>他的作品</Text>
                    </View>
                  </TouchableOpacity>
                )}
              </View>

              <View style={[styles.titleStyle, {marginTop: 30}]}>
                <View style={styles.titleStyleLeftContainer}>
                  <Text style={[styles.leftStyle, {fontSize: 23}]}>
                    生活需要一杯美好
                  </Text>
                </View>
              </View>
              <Text style={styles.contentStyle}>
                你看，尽管我们说着生活有多不如意，这即将过去的一年有多糟糕，可是每个人都在为下一年而努力，期待着亮丽的明天。
              </Text>
              <View style={styles.down}>
                <View style={styles.downContent}>
                  <Image source={downLoad} style={styles.imgStyle}></Image>
                  <Text style={styles.downText}>323</Text>
                </View>
                <View style={styles.downContent}>
                  <Image source={dz} style={styles.imgStyle}></Image>
                  <Text style={styles.downText}>323</Text>
                </View>
                <View style={styles.downContent}>
                  <Image source={share} style={styles.imgStyle}></Image>
                  <Text style={styles.downText}>323</Text>
                </View>
              </View>
              <View style={styles.btnBottomContainer}>
                <View style={styles.btnBottom}>
                  <View style={styles.leftBtn}>
                    <Image source={sc} style={styles.imgBtnStyle}></Image>
                  </View>
                  <View style={styles.rightBtn}>
                    <Text style={styles.btnText}>下载壁纸</Text>
                  </View>
                </View>
              </View>
            </View>
          </Animatable.View>
        </SafeAreaView>
      </ImageBackground>
    );
  }
}
